<!-- 搜索 -->
<div class="SearchBox">
    <img src="../../../assets/img/homeheader2.jpg" alt="">
    <div  (click)="goSearsh()" class="Searching">
        <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
            <input type="text" nz-input  readonly="readonly" placeholder="请输入房源" />
          </nz-input-group>
          <ng-template #suffixButton>
            <button  nzSearch >搜索</button>
          </ng-template>
    </div>
</div>
<!-- 四个卡片 -->
<div class="FourCards">
    <nz-card  style="width:250px; height: 250px;" [nzCover]="coverTemplate1" [nzActions]="[]">
        <div nz-card-grid class="Card-detail" style="background-color: #a7d7c5;" (click)="goRentalOptions()">租房</div>
        <ng-template #coverTemplate1>
            <img style="height: 200px;" alt="example" src="../../../assets/img/home2.jpg" />
          </ng-template>
      </nz-card>
      <nz-card  style="width:250px; height: 250px;" [nzCover]="coverTemplate2" [nzActions]="[]">
        <div nz-card-grid class="Card-detail" style="background-color: #ffd6a0;" (click)="goPersonalData()">个人信息</div>
        <ng-template #coverTemplate2>
            <img style="height: 200px;" alt="example" src="../../../assets/img/home3.jpg" />
          </ng-template>
      </nz-card>
      <nz-card  style="width:250px; height: 250px;" [nzCover]="coverTemplate3" [nzActions]="[]">
        <div nz-card-grid class="Card-detail" style="background-color: #a7d7c5;" (click)="goRentManagement()">通知</div>
        <ng-template #coverTemplate3>
            <img style="height: 200px;" alt="example" src="../../../assets/img/home4.jpg" />
          </ng-template>
      </nz-card>
      <nz-card  style="width:250px; height: 250px;" [nzCover]="coverTemplate4" [nzActions]="[]">
        <div nz-card-grid class="Card-detail" style="background-color: #ffd6a0;" (click)="goRentCollection()">收藏</div>
        <ng-template #coverTemplate4>
            <img style="height: 200px;" alt="example" src="../../../assets/img/home5.jpg" />
          </ng-template>
      </nz-card>
</div>
<!-- 丰富体验 -->
<div class="experience">
    <div class="title-experience">
        <span nz-icon nzType="cloud" [nzTheme]="'twotone'" [nzTwotoneColor]="'#038cc7'"></span>
        <h1>丰富体验</h1>
        <span nz-icon nzType="cloud" [nzTheme]="'twotone'" [nzTwotoneColor]="'#038cc7'"></span>
    </div>
    <div class="img-experience">
        <!-- 1 -->
        <div class="img1">
        <img src="../../../assets/img/home-experience1.jpg" alt="">
        <div class="text-experience">
            <p>喝最烈的酒，蹦最野的迪，700位自如客齐跨年，嗨皮共享金猪年，将欢乐和感动从2018带到2019。</p>
        </div>
        </div>
        <!-- 2 -->
        <div class="img1">
            <img src="../../../assets/img/home-experience2.jpg" alt="">
            <div class="text-experience">
                <p>喝最烈的酒，蹦最野的迪，700位自如客齐跨年，嗨皮共享金猪年，将欢乐和感动从2018带到2019。</p>
        </div>
        </div>
        <!-- 3 -->
        <div class="img1">
            <img src="../../../assets/img/home-experience3.jpg" alt="">
            <div class="text-experience">
                <p>喝最烈的酒，蹦最野的迪，700位自如客齐跨年，嗨皮共享金猪年，将欢乐和感动从2018带到2019。</p>
        </div>
        </div>
        <!-- 4 -->
        <div class="img1">
            <img src="../../../assets/img/home-experience5.jpg" alt="">
            <div class="text-experience">
                <p>喝最烈的酒，蹦最野的迪，700位自如客齐跨年，嗨皮共享金猪年，将欢乐和感动从2018带到2019。</p>
        </div>
        </div>
    </div>
</div>
<!-- 丰富服务 -->
<div class="serve experience">
    <div class="title-experience">
        <span nz-icon nzType="fire" [nzTheme]="'twotone'" [nzTwotoneColor]="'#038cc7'"></span>
        <h1>丰富服务</h1>
        <span nz-icon nzType="fire" [nzTheme]="'twotone'" [nzTwotoneColor]="'#038cc7'"></span>
    </div>
    <div class="img-serve">
        <img src="../../../assets/img/home-serve.png" alt="">
    </div>
</div>